<?php
$p = \Yii::$app->controller->module->templateAsset."/qingding/";
?>

<style type="text/css">
    
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    /*background-color: black;*/
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
    /*background-color: #000;*/
}
#container > div,#container > img
{
    position: absolute;
}
#xin
{
    left: 164px;
    top: 257px;
    position: absolute;
    opacity: 0;
}
#zimeiti
{
    left: 241px;
    top: 624px;
    position: absolute;
    -webkit-transform: scale(0,1);
}
#xian
{
    left: 245px;
    top: 679px;
    position: absolute;
    -webkit-transform: translate(0px,200px);
}
#bg0
{
    position: absolute;
    /*height: */
}
#R
{
    left: 327px;
    top: 429px;
    opacity: 0;
    -webkit-transform: translate(0px,0px) rotate(0deg);
}
#U
{
    left: 390px;
    top: 430px;
    opacity: 0;
    -webkit-transform: translate(0px,0px) rotate(0deg);
}
#W
{
    left: 450px;
    top: 430px;
    opacity: 0;
    -webkit-transform: translate(0px,0px) rotate(0deg);
}
#word1
{
    left: 333px;
    top: 487px;
    color: #fff;
    font-size: 18px;
    opacity: 0
}
#word2
{
    left: 20px;
    top: 370px;
    color: #fff;
    font-size: 18px;
    opacity: 0;
}
#word3
{
    left: 334px;
    top: 370px;
    color: #fff;
    font-size: 18px;
    opacity: 0;
}
#udiv
{
    left: 0px;
    /*top: 400px;*/
}
.page
{
    width: 500px;
    height: 815px;
    /*overflow: hidden;*/
}
.page >div, .page > img
{
    position: absolute;
    /*overflow: hidden;*/
}
.divv
{
    width: 500px;
    height: 815px;
    background-color: #fff;
    position: absolute;
    overflow: hidden;
}
/*#img1v
{
    width: 560px;
    height: 815px;
    position: absolute;
}*/
#img2v,#img3v,#img4v,#img5v,#img6v
{
/*    width: 500px;
    height: 815px;*/
}
#font1
{
    /*top: 364px;*/
    opacity: 0;
}
#view1h,#view2h,#view3h,#view4h,#view5h,#view6h
{
    width: 1130px;
    height: 815px;
    left: -150px;
    position: absolute;
    -webkit-transform: translate(-50px,0px);
}
#imgview1h,#imgview2h,#imgview3h,#imgview4h,#imgview5h,#imgview6h
{
    width: 1130px;
    height: 815px;
}
#div1h
{
    width: 500px;
    height: 360px;
    overflow: hidden;
    position: absolute;
    top: 455px;
    -webkit-transform: translate(0px,360px);

}
/*#img1h
{
    width: 500px;
    height: 360px;
}*/
#div2v
{
    opacity: 0;
    width: 550px;
    height: 815px;
    top: 0px;
    /*left: 100px;*/
}
#font2
{
    opacity: 0;
}
#div2h
{
    width: 500px;
    height: 342px;
    background-color: #fff;
    position: absolute;
    top: 0px;
    -webkit-transform: translate(0px,-342px);
    overflow: hidden;
}
/*#img2h
{
    width: 500px;
    height: 342px;
}*/
#div3v
{
    opacity: 0;
    width: 500px;
    height: 815px;
    top: 0px;
}
#font3
{
    opacity: 0;
    top: -100px;
}
#div3h
{
    width: 650px;
    height: 520px;
    background-color: #fff;
    position: absolute;
    top: 342px;
    opacity: 0;
    overflow: hidden;
}
/*#img3h
{
    width: 650px;
    height: 520px;
}*/
#div4v
{
    width: 550px;
    height: 815px;
    /*left: -200px;*/
    opacity: 0;
    position: absolute;
}
#div4h
{
    top: 420px;
    width: 500px;
    height: 395px;
    background-color: #fff;
    position: absolute;
    opacity: 0;
    overflow: hidden;
}
#font4
{
    opacity: 0;
}
#div5v
{
    opacity: 0;
    /*left: 100px;*/
    width: 550px;
    height: 815px;
    position: absolute;
}
/*#img5v
{
    width: 550px;
}*/
#div5h
{
    width: 500px;
    height: 380px;
    position: absolute;
    background-color: #fff;
    top: 0px;
    -webkit-transform: translate(0px,-380px);
    overflow: hidden;
    /*opacity: 0;*/
}
#font5
{
    opacity: 0;
}
#div6v
{
    width: 550px;
    height: 815px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    opacity: 0;
}
/*#img6v
{
    width: 550px;
    height: 815px;
}*/
#div6h
{
    width: 500px;
    height: 383px;
    background-color: #fff;
    top: 432px;
    opacity: 0;
}
#font6
{
    opacity: 0;
}
.img 
{
    position: absolute;
}
.wordspan
{
    width: 260px;
    height: 100px;
    color: #fff;
    font-family: bold;
    text-shadow: 1px 1px 1px #000;
    font-size: 25px;
    position: absolute;
    text-align: center;
}
#div1v,#div1h,#div2v,#div2h,#div3h,#div3v,#div4h,#div4v,#div5h,#div5v,#div6h,#div6v
{
    display: none;
}
</style>
<style type="text/css">
@-webkit-keyframes zimeiti_in
{
    0%   {-webkit-transform: scale(0,1);}
    60%  {-webkit-transform: scale(1,1);}
    80%  {-webkit-transform: scale(0.8,1);}
    100% {-webkit-transform: scale(1,1);}

}
@-webkit-keyframes xin_in
{
    0%   {-webkit-transform: scale(0.3);opacity: 0}
    60%  {-webkit-transform: scale(1);opacity: 1}
    80%  {-webkit-transform: scale(0.9);opacity: 1}
    100% {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes xian_in
{
    from  {-webkit-transform: translate(0px,200px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes w1_in
{
    from {-webkit-transform: translate(-126px,-33px) rotate(-450deg);opacity: 0}
    to   {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes w2_in
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(-450px,-116px) rotate(360deg);opacity: 1}
}
@-webkit-keyframes w3_in
{
    from  {-webkit-transform: translate(-450px,-116px) rotate(360deg);opacity: 1}
    to    {-webkit-transform: translate(-122px,-117px) rotate(720deg);opacity: 1}
}
@-webkit-keyframes r1_in
{
    from {-webkit-transform: translate(105px,-93px) rotate(-520deg);opacity: 0}
    to   {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes r2_in
{
    0%   {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    50%  {-webkit-transform: translate(-132px,-58px) rotate(540deg);opacity: 1}
    100% {-webkit-transform: translate(-264px,-115px) rotate(360deg);opacity: 1}
}
@-webkit-keyframes r3_in
{
    from  {-webkit-transform: translate(-264px,-115px) rotate(360deg);opacity: 1}
    to    {-webkit-transform: translate(59px,-116px) rotate(720deg);opacity: 1}
}
@-webkit-keyframes r4_in
{
    from  {-webkit-transform: translate(59px,-116px) rotate(720deg);opacity: 1}
    to    {-webkit-transform: translate(59px,-36px) rotate(720deg);opacity: 1}
}
@-webkit-keyframes r4_out
{
    0%    {-webkit-transform: translate(59px,-36px) rotate(720deg);opacity: 1}
    40%   {-webkit-transform: translate(19px,-36px) rotate(720deg);opacity: 1}
    100%  {-webkit-transform: translate(239px,-36px) rotate(720deg);opacity: 0}
}
@-webkit-keyframes u1_in
{
    from  {-webkit-transform: translate(60px,-135px) rotate(-360deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes u2_in
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(-264px,-116px) rotate(360deg);opacity: 1}
}
@-webkit-keyframes u3_in
{
    from  {-webkit-transform: translate(-264px,-116px) rotate(360deg);opacity: 1}
    to    {-webkit-transform: translate(53px,-117px) rotate(720deg);opacity: 1}
}
@-webkit-keyframes u4_in
{
    from  {-webkit-transform: translate(53px,-117px) rotate(720deg);opacity: 1}
    to    {-webkit-transform: translate(53px,-37px) rotate(720deg);opacity: 1}
}
@-webkit-keyframes u4_out
{
    0%   {-webkit-transform: translate(53px,-37px) rotate(720deg);opacity: 1}
    40%  {-webkit-transform: translate(-13px,-37px) rotate(720deg);opacity: 1}
    100% {-webkit-transform: translate(193px,-37px) rotate(720deg);opacity: 0}
}
@-webkit-keyframes word1_in
{
    0%  {-webkit-transform: translate(-50px,0px);opacity: 0}
    50%    {-webkit-transform: translate(0px,0px);opacity: 1}
    100%  {-webkit-transform: translate(50px,0px);opacity: 0}
}
@-webkit-keyframes word2_in
{
    0%    {-webkit-transform: translate(50px,0px);opacity: 0}
    50%   {-webkit-transform: translate(0px,0px);opacity: 1}
    100%  {-webkit-transform: translate(-50px,0px);opacity: 0}
}
@-webkit-keyframes word3_in
{
    0%   {opacity: 0}
    30%  {-webkit-transform:translate(0px,0px);opacity: 1}
    100% {-webkit-transform: translate(0px,-20px);opacity: 0}
}
@-webkit-keyframes w3_out
{
    0%   {-webkit-transform: translate(-122px,-117px) rotate(720deg);opacity: 1}
    50%  {-webkit-transform: translate(-122px,-117px) rotate(900deg) scale(1,1);opacity: 1}
    100% {-webkit-transform: translate(-122px,-117px) rotate(900deg) scale(1,-1);opacity: 1}
}
@-webkit-keyframes w4_in
{
    from  {-webkit-transform: translate(-122px,-117px) rotate(900deg) scale(1,-1);opacity: 1}
    to    {-webkit-transform: translate(-122px,-37px) rotate(900deg) scale(1,-1);opacity: 1}
}
@-webkit-keyframes w4_out
{
    from  {-webkit-transform: translate(-122px,-37px) rotate(900deg) scale(1,-1);opacity: 1}
    to    {-webkit-transform: translate(78px,-37px) rotate(900deg) scale(1,-1);opacity: 0}
}
@-webkit-keyframes img1v_in
{
    from  {-webkit-transform: translate(-60px,0px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes img2v_in
{
    from  {-webkit-transform: translate(60px,0px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div1h_in
{
    from  {-webkit-transform: translate(0px,360px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div1h_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
@-webkit-keyframes view1h_in
{
    from  {-webkit-transform: translate(-50px,0px);}
    to    {-webkit-transform: translate(50px,0px);}
}
@-webkit-keyframes div2v_in
{
    from  {-webkit-transform: translate(0px,-50px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div2h_in
{
    from  {-webkit-transform: translate(0px,-342px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div2h_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
@-webkit-keyframes div3v_in
{
    from  {-webkit-transform: translate(0px,50px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div3h_in
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    20%  {-webkit-transform: translate(-30px,0px);opacity: 1}
    100% {-webkit-transform: translate(-150px,0px);opacity: 1}
}
@-webkit-keyframes div3h_out
{
    from  {-webkit-transform: translate(-150px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
@-webkit-keyframes div4v_in
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(50px,0px);opacity: 1}
}
@-webkit-keyframes font4_in
{
    from  {-webkit-transform: translate(200px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes font4_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
@-webkit-keyframes div4h_in
{
    from  {-webkit-transform: translate(-200px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div4v_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
@-webkit-keyframes div5v_in
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-50px,0px);opacity: 1}
}
@-webkit-keyframes div5h_in
{
    from  {-webkit-transform: translate(0px,-380px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div5h_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
@-webkit-keyframes w6_in
{
    0%    {-webkit-transform: translate(-743px,-120px) rotate(0deg);opacity: 1}
    50%   {-webkit-transform: translate(-443px,-120px) rotate(0deg);opacity: 1}
    100%  {-webkit-transform: translate(-443px,-20px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes w6_out
{
    from  {-webkit-transform: translate(-443px,-20px) rotate(0deg);opacity: 1}
    to   {-webkit-transform: translate(-443px,-20px) rotate(0deg);opacity: 0}
}
@-webkit-keyframes r6_in
{
    0%    {-webkit-transform: translate(-559px,-120px) rotate(0deg);opacity: 1}
    50%   {-webkit-transform: translate(-259px,-120px) rotate(0deg);opacity: 1}
    100%  {-webkit-transform: translate(-259px,-20px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes r6_out
{
    from  {-webkit-transform: translate(-259px,-20px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(-259px,-20px) rotate(0deg);opacity: 0}
}
@-webkit-keyframes u6_in
{
    0%   {-webkit-transform: translate(-561px,-120px) rotate(0deg);opacity: 1}
    50%  {-webkit-transform: translate(-261px,-120px) rotate(0deg);opacity: 1}
    100% {-webkit-transform: translate(-261px,-21px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes u6_out
{
    from  {-webkit-transform: translate(-261px,-21px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(-261px,-21px) rotate(0deg);opacity: 0}
}
@-webkit-keyframes div6v_in
{
    from  {-webkit-transform: translate(50px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div6h_in
{
    from  {-webkit-transform: translate(0px,300px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div6h_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,0px);opacity: 0}
}
</style>
<div id='container'>


    <div id='page1' class='page'>

        <div id='view1h'>
            <img id='imgview1h' class='img'>
        </div>
        <img id='font1' src='<?=$p?>images/TB2WcfvXFHzQeBjSZFHXXbwZpXa_!!1016194477.png'>
        <div id='div1h'>
            <img id='img1h' class='img'>
            <span id='word1h' class='wordspan' style='left:10px;top:10px;'></span>
        </div>

        <div id='div1v' class='divv'>
            <img id='img1v' class='img'>
            <span id='word1v' class='wordspan' style='left:120px;top:612px;'></span>
        </div>
    </div>

    <div id='page2' class='page'>

        <div id='view2h'  style='opacity:0;'>
            <img id='imgview2h' class='img'>
        </div>
        <img id='font2' src='<?=$p?>images/TB2BDd7aR_xQeBjy0FhXXbAoFXa_!!1016194477.png'>

        <div id='div2v' class='divv'>
            <img id='img2v' class='img'>
            <span id='word2v' class='wordspan' style='left:120px;top:612px;'></span>
        </div>
        <div id='div2h'>
            <img id='img2h' class='img'>
            <span id='word2h' class='wordspan' style='left:240px;top:267px;'></span>
        </div>
    </div>

    <div id='page3' class='page'>

        <div id='view3h'  style='opacity:0;'>
            <img id='imgview3h' class='img'>
        </div>

        <img id='font3' src='<?=$p?>images/TB2txX6aGzyQeBjy0FbXXbZapXa_!!1016194477.png'>
        <div id='div3v' class='divv'>
            <img id='img3v' class='img'>
            <span id='word3v' class='wordspan' style='left:120px;top:612px;'></span>
        </div>

        <div id='div3h'>
            <img id='img3h' class='img'>
            <span id='word3h' class='wordspan' style='left:187px;top:10px;'></span>
        </div>
    </div>

    <div id='page4' class='page'>

        <div id='view4h'  style='opacity:0;'>
            <img id='imgview4h' class='img'>
        </div>

        <img id='font4' src='<?=$p?>images/TB2WcfvXFHzQeBjSZFHXXbwZpXa_!!1016194477.png'>

        <div id='div4v'>
            <img id='img4v' class='img'>
            <span id='word4v' class='wordspan' style='left:120px;top:612px;'></span>
        </div>

        <div id='div4h'>
            <img id='img4h' class='img'>
            <span id='word4h' class='wordspan' style='left:10px;top:10px;'></span>
        </div>
    </div>

    <div id='page5' class='page'>

        <div id='view5h'  style='opacity:0;'>
            <img id='imgview5h' class='img'>
        </div>

        <img id='font5' src='<?=$p?>images/TB2BDd7aR_xQeBjy0FhXXbAoFXa_!!1016194477.png'>

        <div id='div5v'>
            <img id='img5v' class='img'>
            <span id='word5v' class='wordspan' style='left:120px;top:612px;'></span>
        </div>

        <div id='div5h'>
            <img id='img5h' class='img'>
            <span id='word5h' class='wordspan' style='left:240px;top:267px;'></span>
        </div>
    </div>

    <div id='page6' class='page'>

        <div id='view6h'  style='opacity:0;'>
            <img id='imgview6h' class='img'>
        </div>

        <img id='font6' src='<?=$p?>images/TB2txX6aGzyQeBjy0FbXXbZapXa_!!1016194477.png'>

        <div id='div6v'>
            <img id='img6v' class='img'>
            <span id='word6v' class='wordspan' style='left:120px;top:612px;'></span>
        </div>

        <div id='div6h'>
            <img id='img6h' class='img'>
            <span id='word6h' class='wordspan' style='left:187px;top:10px;'></span>
        </div>

    </div>

    <div id='page0'>
        <img id='bg0'>
        <img id='xin' src='<?=$p?>images/TB2aIKaaNfxQeBjSspjXXX4opXa_!!1016194477.png'>
        <img src='<?=$p?>images/TB2qDh5aKTyQeBjSspfXXaI3FXa_!!1016194477.png'>
       
        <img id='xian' src='<?=$p?>images/TB2UmN7aGnyQeBjSsphXXXiuVXa_!!1016194477.png'>

        <div id='pagetitle' style='position:absolute;top:432px;left:90px;width:330px;height:146px;opacity:0;'>
            <div id='titlecontent' style='width:330px;height:146px;vertical-align:middle;display:table-cell;text-align:center;font-size:24px;line-height:45px;color:#000;'></div>
        </div>
    </div>
    




   

    <img id='W' src='<?=$p?>images/TB2utx5aRYxQeBjSspdXXb6QXXa_!!1016194477.png'>
    <img id='R' src='<?=$p?>images/TB2PUJ_aK_yQeBjy0FlXXczrXXa_!!1016194477.png'>
    <img id='U' src='<?=$p?>images/TB2NMDtXNvzQeBjSZFqXXXN5VXa_!!1016194477.png'>
    
    <div id='word1'>Are you want ... ?</div>
    <div id='word2'>Who are you?</div>
    <div id='word3'>Where are you?</div>
</div>

<script>

function id(name)
{
    return document.getElementById(name);
}

function showtitle()
{
    id('xin').style.webkitAnimation = 'xin_in 0.7s linear both';
    
    id('xian').style.webkitAnimation = 'xian_in 0.8s linear both';

    id('pagetitle').style.webkitAnimation = 'fadein 1s 1s linear both';
    id('titlecontent').innerHTML = desc;

    // setTimeout(distitle,3000)
}

function xifenbao_zimeiti()
{
    setImage('1');

    id('div1v').style.webkitAnimation = 'fadein 1s 0.5s linear both';
    id('img1v').style.webkitAnimation = 'img1v_in 7s linear both';


    id('font1').style.webkitAnimation = 'fadein 1s linear both';
    id('div1h').style.webkitAnimation = 'div1h_in 1s 0.5s ease-out both';
    id('view1h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('page0').style.webkitAnimation = 'fadeout 1s linear both';
    id('W').style.webkitAnimation = 'w1_in 0.8s 1s ease-out both';
    id('R').style.webkitAnimation = 'r1_in 0.8s 1.3s ease-out both';
    id('U').style.webkitAnimation = 'u1_in 0.8s 1.5s ease-out both';
    id('word1').style.webkitAnimation = 'word1_in 8s 1s ease-out both';

    timeout[1] = setTimeout(show2,6000);
}

function show2()
{
    setImage('2');

    id('div2v').style.webkitAnimation = 'fadein 2s ease-out both';
    id('img2v').style.webkitAnimation = 'div2v_in 6s linear both';

    id('view1h').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('div1v').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('img1v').style.webkitAnimation = 'fadeout 0.5s linear both';

    id('font1').style.webkitAnimation = 'fadeout 1s linear both';
    id('div1h').style.webkitAnimation = 'div1h_out 1s linear both';

    id('view2h').style.webkitAnimation = 'fadein 1s linear both';
    id('imgview2h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('font2').style.webkitAnimation = 'fadein 1s linear both';
    id('div2h').style.webkitAnimation = 'div2h_in 1s 0.5s ease-out both';


    id('W').style.webkitAnimation = 'w2_in 1s ease-out both';
    id('R').style.webkitAnimation = 'r2_in 1s 0.2s linear both';
    id('U').style.webkitAnimation = 'u2_in 1s 0.4s ease-out both';
    id('word2').style.webkitAnimation = 'word2_in 8s 1s linear both';

    timeout[2] = setTimeout(show3, 6000)
}

function show3()
{
    setImage('3');

    id('div3v').style.webkitAnimation = 'fadein 2s ease-out both';
    id('img3v').style.webkitAnimation = 'div3v_in 6s linear both';

    id('view2h').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('div2v').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('img2v').style.webkitAnimation = 'fadeout 0.5s linear both';

    id('font2').style.webkitAnimation = 'fadeout 1s linear both';
    id('div2h').style.webkitAnimation = 'div2h_out 1s linear both';

    id('view3h').style.webkitAnimation = 'fadein 1s linear both';
    id('imgview3h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('font3').style.webkitAnimation = 'fadein 1s linear both';
    id('div3h').style.webkitAnimation = 'div3h_in 5s ease-out both';

    id('W').style.webkitAnimation = 'w3_in 1s 1.4s ease-out both';
    id('R').style.webkitAnimation = 'r3_in 1s 1.2s ease-out both';
    id('U').style.webkitAnimation = 'u3_in 1s 1s ease-out both';
    id('word3').style.webkitAnimation = 'word3_in 4s 3s linear both';

    timeout[3] = setTimeout(show4,6000)
}

function show4()
{
    setImage('4');

    id('div4v').style.webkitAnimation = 'fadein 2s ease-out both';
    id('img4v').style.webkitAnimation = 'div4v_in 6s linear both';

    id('view3h').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('div3v').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('img3v').style.webkitAnimation = 'fadeout 0.5s linear both';

    id('font3').style.webkitAnimation = 'fadeout 1s linear both';
    id('div3h').style.webkitAnimation = 'div3h_out 1s linear both';

    id('view4h').style.webkitAnimation = 'fadein 1s linear both';
    id('imgview4h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('div4h').style.webkitAnimation = 'div4h_in 2s ease-out both';
    id('font4').style.webkitAnimation = 'font4_in 2s ease-out both';

    id('W').style.webkitAnimation = 'w3_out 1.5s 1s linear both';

    timeout[4] = setTimeout(function()
    {
        id('W').style.webkitAnimation = 'w4_in 1s ease-out both';
        id('R').style.webkitAnimation = 'r4_in 1s ease-out both';
        id('U').style.webkitAnimation = 'u4_in 1s ease-out both';
    },2500)


    timeout[5] = setTimeout(show5, 6000)
}

function show5()
{
    setImage('5');

    id('div5v').style.webkitAnimation = 'fadein 1.5s ease-out both';
    id('img5v').style.webkitAnimation = 'div5v_in 6s linear both';

    id('view4h').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('div4v').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('img4v').style.webkitAnimation = 'fadeout 0.5s linear both';

    id('view5h').style.webkitAnimation = 'fadein 1s linear both';
    id('imgview5h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('div4h').style.webkitAnimation = 'div4h_out 2s ease-out both';
    id('font4').style.webkitAnimation = 'font4_out 2s ease-out both';

    id('font5').style.webkitAnimation = 'fadein 1s 0.5s linear both';
    id('div5h').style.webkitAnimation = 'div5h_in 1.5s 1s ease-out both';


    id('W').style.webkitAnimation = 'w4_out 0.7s 1.7s ease-in both';
    id('R').style.webkitAnimation = 'r4_out 1.4s 1s ease-in both';
    id('U').style.webkitAnimation = 'u4_out 1.4s 1s ease-in both';

    id('font4').style.webkitAnimation = 'font4_out 1s linear both';
    id('div4h').style.webkitAnimation = 'div4v_out 1s linear both';


    timeout[6] = setTimeout(show6, 6000)
}

function show6()
{
    setImage('6');

    id('view5h').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('div5v').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('img5v').style.webkitAnimation = 'fadeout 0.5s linear both';

    id('view6h').style.webkitAnimation = 'fadein 1s linear both';
    id('imgview6h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('W').style.webkitAnimation = 'w6_in 2s 0.2s linear both';
    id('R').style.webkitAnimation = 'r6_in 2s 0.1s linear both';
    id('U').style.webkitAnimation = 'u6_in 2s linear both';

    id('font5').style.webkitAnimation = 'fadeout 1s linear both';
    id('div5h').style.webkitAnimation = 'div5h_out 1s linear both';

    id('div6v').style.webkitAnimation = 'fadein 1s linear both';
    id('img6v').style.webkitAnimation = 'div6v_in 6s linear both';

    id('div6h').style.webkitAnimation = 'div6h_in 1.5s 1s ease-out both';
    id('font6').style.webkitAnimation = 'fadein 1s 0.5s linear both';

    id('word1').style.webkitAnimation = '';
    id('word2').style.webkitAnimation = '';
    id('word3').style.webkitAnimation = '';

    timeout[7] = setTimeout(show1, 6000)
}

function show1()
{
    setImage('1');

    id('view6h').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('div6v').style.webkitAnimation = 'fadeout 0.5s linear both';
    id('img6v').style.webkitAnimation = 'fadeout 0.5s linear both';

    id('W').style.webkitAnimation = 'w6_out 0.8s linear both';
    id('U').style.webkitAnimation = 'u6_out 0.8s 0.2s linear both';
    id('R').style.webkitAnimation = 'r6_out 0.8s 0.4s linear both';

    id('font6').style.webkitAnimation = 'fadeout 1s linear both';
    id('div6h').style.webkitAnimation = 'div6h_out 1s linear both';


    timeout[8] = setTimeout(function()
    {
        id('W').style.webkitAnimation = 'w1_in 0.8s 1s ease-out both';
        id('R').style.webkitAnimation = 'r1_in 0.8s 1.3s ease-out both';
        id('U').style.webkitAnimation = 'u1_in 0.8s 1.5s ease-out both';
        id('word1').style.webkitAnimation = 'word1_in 8s 1s ease-out both';
    },1500)

    id('font1').style.webkitAnimation = 'fadein 1s linear both';
    id('div1h').style.webkitAnimation = 'div1h_in 1s 0.5s ease-out both';
    id('view1h').style.webkitAnimation = 'view1h_in 7s linear infinite alternate';

    id('div1v').style.webkitAnimation = 'fadein 1s 0.5s linear both';
    id('img1v').style.webkitAnimation = 'img1v_in 7s linear both';

    timeout[9] = setTimeout(show2, 6000)

}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime = 3000;
var timeout = [];
var showfont = false;

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            xifenbao_zimeiti();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    xifenbao_zimeiti();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            xifenbao_zimeiti();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    xifenbao_zimeiti();
                },dis_titletime);
        }

    }
}
//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

var divwidth  = {'1h': 500,'1v': 560, '2h': 500, '2v': 342, '3h': 650, '3v': 500, '4h': 500, '4v': 550, '5h': 500, '5v': 550, '6h': 500, '6v': 500};
var divheight = {'1h': 360,'1v': 815, '2h': 342, '2v': 815, '3h': 520, '3v': 815, '4h': 395, '4v': 815, '5h': 380, '5v': 815, '6h': 383, '6v': 815};
function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;
    var viewdiv = id('view'+idname + 'h');
    var viewimg = id('imgview'+idname + 'h');

    if(img_bili > 1)
    {
        div = id('div'+idname + 'h');
        div1 = id('div'+idname + 'v');
        idname = idname + 'h';

    }
    else
    {
        div = id('div'+idname + 'v');
        div1 = id('div'+idname + 'h');
        idname = idname + 'v';

    }

    width = divwidth[idname];
    height = divheight[idname];

    div.style.display = 'block';
    div1.style.display = 'none';


    var img = id('img'+idname);
    img.src = Onload_imgs_url[image_url_index];

   // var wordspan = id('word'+idname)
   // var str = words[get_pid(Onload_imgs_url[image_url_index])];
   // if(str != undefined)
    //    wordspan.innerHTML = str; 

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }

    if(img_bili > 1)
    {
        viewdiv.style.display = 'block';
        viewimg.src=Onload_imgs_url[image_url_index];

        if(img_bili > (1130/815))
        {
            img.style.top = '0px';
            img.style.height = height + 'px';
            img.style.width = height*img_bili + 'px';
            img.style.left = -((height*img_bili-width)/2)+'px';
        }
        else
        {
            img.style.left = '0px';
            img.style.width = width+'px';
            img.style.height = width/img_bili + 'px';
            img.style.top = -((width/img_bili-height)/2) + 'px';
        }
    }
    else
    {
        viewdiv.style.display = 'none';
    }



    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}

call_me(load_images)

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i])
    }

    var itemlist = ['xin','zimeiti','xian','pagetitle','div1v','div1h','img1v','font1','view1h','page0','W','R','U','word1','div2v','img2v','div2h','view2h',
    'imgview2h','word2','font2','word3','font3','div3v','img3v','div3h','view3h','imgview3h','font4','div4h','div4v','img4v','view4h','imgview4h','div5v',
    'img5v','div5h','view5h','imgview5h','font5','font6','div6v','div6h','img6v','view6h','imgview6h'];

    for(var i =0; i<itemlist.length;i++)
    {
        id(itemlist[i]).style.webkitAnimation = '';
    }
    for(var i = 1 ;i <7 ;i++)
    {
        id('div'+ i + 'h').style.display = 'none';
        id('div'+ i + 'v').style.display = 'none';
        id('view' + i + 'h').style.display = 'none';
    }



}
var get_pid = function(url)
{
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}
</script>
